<template>
 <div class="row set-block">
   <div class="title">
     <div class="name">{{ name }}</div>
     <div class="totle">总故障数：0</div>
   </div>
   <div class="details">
     <div class="card" >
       <span class="number">0</span>
       <div class="aplication-icon text-center"><i class="iconfont icon-icon71"></i></div>
       <div class="application-name text-center">应用</div>
       <div class="application-totle text-center">总数：276</div>
     </div>
     <div class="card" >
       <span class="number danger">4</span>
       <div class="aplication-icon text-center"><i class="iconfont icon-icon71"></i></div>
       <div class="application-name text-center">应用</div>
       <div class="application-totle text-center">总数：276</div>
     </div><div class="card" >
       <span class="number">0</span>
       <div class="aplication-icon text-center"><i class="iconfont icon-icon71"></i></div>
       <div class="application-name text-center">应用</div>
       <div class="application-totle text-center">总数：276</div>
     </div><div class="card" >
       <span class="number warnning">16</span>
       <div class="aplication-icon text-center"><i class="iconfont icon-icon71"></i></div>
       <div class="application-name text-center">应用</div>
       <div class="application-totle text-center">总数：276</div>
     </div>
   </div>
 </div>
</template>
<script>      
import BS from '../dataManage';
export default {
  data() {
    return {
      cardList:[]
    }
  },
  props: {
    url:{
      type:String
    },
    name:{
      type:String
    }
  },
  ready() {
    var self = this;
    BS.getCardList(self,self.url);
  }
}
</script>
<style scoped>
.set-block{
  display: inline-block;
  width: 100%;
  padding-bottom:16px;
  border-bottom: 1px solid #fff;
  margin-top: 16px; 
}
.title .name{
  font-size: 16px;
  letter-spacing: 2px;
  color: #666666;
}
.title .totle{
  color: #A5B7C3;
}
.title{
  position: relative;
  top: -22px;
  margin-right: 38px;
}
.title,.details{
  display: inline-block;
}
.details .card{
  background-color: #fff;
  padding:16px;
  border-radius: 12px;
  position: relative;
  height: 120px;
  width: 160px;
  display: inline-block;
  margin-right: 16px;
}
.details .card .number{
  font-size: 14px;
  position: absolute;
  top: 8px;
  right: 12px;
}
.details .card i{
  font-size: 50px;
}
.card .aplication-icon{
  margin-top: 12px;
}
.card .application-name{
  font-size: 14px;
  color: #666666;
  margin-top: 6px;
}
.card .application-totle{
  color: #A5B7C3;
}
.card .danger,
.card .warnning{
  height: 32px;
  width: 32px;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  padding-top: 6px;
  top: -8px!important;
  right: -8px!important;
}
.card .danger{
  background-color: #ff7373;
}
.card .warnning{
  background-color: #ffc926;
}
</style>


